<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>详情页</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/details.css" rel="stylesheet"/>
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.validate.js"></script>
    <style>
   		<c:if test="${LoginUser == null}">
   			.docomment{
   				display:none;
   			}
   		</c:if>
   		<c:if test="${LoginUser!= null}">
   			.docomment{
   				display:block;
   			}
   		</c:if>
   	</style>
    <script>
        $(function(){
        	 $("#commentForm").validate({
                 rules:{
                   	content:{required:true}
                 },
                 messages:{
                    content:{required:"评论不能为空"}
                 }
             })
            $(".add").click(function(){
                var num = parseInt($(this).prev().val());
                $(this).prev().val(++num);
            })
            $(".sub").click(function(){
                var num = parseInt($(this).next().val());
                if(num>1){
                    $(this).next().val(--num);
                }
            })
             $(".smallimg div img").hover(function(){
                $(".bigimg img").attr("src",$(this).attr("src"));
            })
        })
    </script>
</head>
<body>
<div class="header">
    <div class="container">
        <div class="nav">
					<p>
						<c:if test="${LoginUser==null}">
							<a href="login.html">登陆</a>&nbsp;&nbsp;
                    </c:if>
						<c:if test="${LoginUser!=null}">
							<a>${LoginUser.userName},欢迎你！</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                    <a href="cart.html">我的购物车</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                    <a href="login.html?out=t">注销</a>&nbsp;&nbsp;
                    </c:if>
						|&nbsp;&nbsp; <a href="register.html">注册</a>
					</p>
					<p>|&nbsp;符合人类进步的食品</p>
					<p>
						<a href="index.html">首页</a>&nbsp;&nbsp;|&nbsp;&nbsp; <a
							href="productList.html">蛋糕名录</a>&nbsp;&nbsp;|&nbsp;&nbsp; <a
							href="user.html">用户中心</a>
					</p>
				</div>
    </div>
</div>
<div class="main">
    <div class="food">
        <div class="cakeImg">
            <div class="bigimg">
                <img src="image/productImg/${cake.mainimg}">
            </div>
            <div class="row smallimg">
                <c:forEach var="img" items="${cakeImgs}">
                	<div class="col-xs-6 col-md-2">
	                    <a href="#" class="thumbnail">
	                        <img src="image/productImg/${img.img}">
	                    </a>
                	</div>
                </c:forEach>
            </div>
            <div class="foodbutton">
                <button type="button" class="btn btn-default btn-lg">
                    <span class="glyphicon glyphicon-phone" aria-hidden="true"></span> 分享
                </button>
                <button type="button" class="btn btn-default btn-lg">
                    <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span> 收藏
                </button>
                <button type="button" class="btn btn-default btn-lg">
                    <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>我要评论
                </button>
                <a href="">举报</a>
            </div>
        </div>
        <div class="cakeForm">
            <p>${cake.name}</p>
            <p style="font-size: 14px">价格:¥<span>${cake.price}</span></p>
            <p>月销量：<span>${cake.stock}</span>件</p>
            <p>累计评价：<span>999</span>次</p>
            <form action="cartadd" method="post">
                <p>
                    <input type="hidden" name="kid" value="${cake.id}" />
                    <input type="radio" name="size" value="128" checked><label class="label label-default">1磅</label>
                    <input type="radio" name="size" value="64"><label class="label label-default">2磅</label>
                </p>
                <p>
                    <input type="radio" name="size" value="32"><label class="label label-default">3磅</label>
                    <input type="radio" name="size" value="32"><label class="label label-default">5磅</label>
                </p>
                <p>数量：
                    <input type="button" name="sub" class="sub" value="-">
                    <input type="text" name="number" value="1">
                    <input type="button" name="add" class="add" value="+">
                    库存：<span>${cake.stock}</span>件
                </p>
                <p>支付方式：
                    <select>
                        <option>微信</option>
                        <option>支付宝</option>
                    </select>
                </p>
                <p>
                    <button class="buy">加入购物车</button>
                </p>
            </form>
            <p>
                <a>服务承诺</a>
                <a>正品保证</a>
                <a>极速退款</a>
            </p>
        </div>
    </div>
    <div class="details">
        <p>
            品牌名称：<a href="#">21cake/廿一客</a>
            <button type="button" class="btn btn-default btn-lg focus">
                <span class="glyphicon glyphicon-star" aria-hidden="true"></span> 关注
            </button>
        </p>
        <table>
            <tr>
                <td>生产许可证编号：QS3112 2401 0422 </td>
                <td>厂名：上海廿一客食品有限公司</td>
                <td>上海市闵行区莘庄工业区春中路588</td>
            </tr>
            <tr>
                <td>厂家联系方式：4006502121 </td>
                <td>厂名：上海廿一客食品有限公司</td>
                <td>储藏方法：0-5°冷藏</td>
            </tr>
            <tr>
                <td>保质期：1 天</td>
                <td>食品添加剂：不添加任何防腐剂</td>
                <td>包装方式: 包装</td>
            </tr>
            <tr>
                <td>品牌: 21cake/廿一客</td>
                <td>系列: 黑白巧克力慕斯</td>
                <td>蛋糕种类: 巧克力蛋糕</td>
            </tr>
            <tr>
                <td>蛋糕尺寸: 1磅 2磅 3磅 其它</td>
                <td>层数: 单层</td>
                <td>配送地区: 全国</td>
            </tr>
            <tr>
                <td>蛋糕价格: 201-300元</td>
                <td>产地: 中国大陆</td>
                <td>省份: 上海</td>
            </tr>
        </table>
        <div class="detailsPhoto">
            <img src="image/details.jpg" width="1200">
        </div>
    </div>
    <div class="docomment">
            <form action="details.html" method="post" id="commentForm">
                <table>
                	<tr>
                		<td>
                			<input type="hidden" name="uid" value="${LoginUser.id}"> 
                		</td>
                		<td>
                			<input type="hidden" name="cid" value="${cake.id}"> 
                		</td>
                	</tr>
                    <tr>
                       <td>评分:</td>
                        <td>
                            <select name="score">
                                <option value="1">1分</option>
                                <option value="2">2分</option>
                                <option value="3">3分</option>
                                <option value="4">4分</option>
                                <option value="5">5分</option>。、
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>评价：</td>
                        <td><textarea  name="content" class=""></textarea></td>
                    </tr>
                    <tr>
                        <td><button class="commentsubmit">提交</button></td>
                        <td><input type="reset" class="reset"></td>
                    </tr>
                </table>
            </form>
        </div>
    <div class="comment">
        <p style="color: #563F2F">用户评论：</p>
        <c:forEach var="c" items="${comments}">
        	<div class="row usercomment">
	            <div class="col-md-2 user">
	                <span class="glyphicon glyphicon-user"></span>
	                ${c.username}
	            </div>
	            <div class="col-md-10 commentDetails">
	                <p>评分:${c.score}</p>
	                <p>评价:${c.content}</p>
	                <p>评论时间:${c.date}</p>
	            </div>
        	</div>  
        </c:forEach>
        <div class="commentnav">
            <ul class="pagination">
                <li>
                	<c:if test="${pageNum>1}">
                		<a href="details.html?kid=${cake.id}&page=${pageNum-1}" aria-label="Previous">
                        	<span aria-hidden="true">&laquo;</span>
                    	</a>
                	</c:if>
                    <c:if test="${pageNum<=1}">
                		<a aria-label="Previous">
                        	<span aria-hidden="true">&laquo;</span>
                    	</a>
                	</c:if>
                </li>
                <c:forEach var="p" begin="0" end="${totalPages-1}" varStatus="s">
            		<li><a href="details.html?kid=${cake.id}&page=${s.index+1}">${s.index+1}</a></li>
                </c:forEach>
                <li>
                	<c:if test="${pageNum<totalPages}">
                		<a href="details.html?kid=${cake.id}&page=${pageNum+1}" aria-label="Next">
                        	<span aria-hidden="true">&raquo;</span>
                    	</a>
                	</c:if>
                    <c:if test="${pageNum>=totalPages}">
                		<a aria-label="Next">
                        	<span aria-hidden="true">&raquo;</span>
                    	</a>
                	</c:if>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="footer">
    <hr>
    <div class="container">
        <div>
            <p>©2005-2014&nbsp;21Cake官网版权所有，并保留所有权利</p>
            <ul>
                <li><a href="#">联系我们</a> &nbsp;</li>
                <li><a href="#">售后流程</a> &nbsp;</li>
                <li><a href="#">订购方式</a> &nbsp;</li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>